<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./font/font-bc/iconfont.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/rem.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="lvmm-box">
        <!-- 头部和登录部分 -->
        <header class="lvmm-head">
            <a href="javascript:;">上海 <span class="xiala iconfont icon-xiajiantou"></span></a>
            驴妈妈旅游网
            <a href="javascript:;" class="iconfont icon-wode"></a>
        </header>
        <!-- 轮播图部分 lvmm-banner -->
        <div class="lvmm-banner">
            <ul class="jd_bannerImg swiper-wrapper">
                <li class="swiper-slide">
                    <a href="javascript:;">
                        <img src="./images/img/banner1.jpg" alt="">
                    </a>
                </li>
                <li class="swiper-slide">
                    <a href="javascript:;">
                        <img src="./images/img/banner2.jpg" alt="">
                    </a>
                </li>
                <li class="swiper-slide">
                    <a href="javascript:;">
                        <img src="./images/img/banner3.jpg" alt="">
                    </a>
                </li>
                <li class="swiper-slide">
                    <a href="javascript:;">
                        <img src="./images/img/banner4.jpg" alt="">
                    </a>
                </li>
                <li class="swiper-slide">
                    <a href="javascript:;">
                        <img src="./images/img/banner5.jpg" alt="">
                    </a>
                </li>
                <li class="swiper-slide">
                    <a href="javascript:;">
                        <img src="./images/img/banner6.jpg" alt="">
                    </a>
                </li>
                <li class="swiper-slide">
                    <a href="javascript:;">
                        <img src="./images/img/banner7.jpg" alt="">
                    </a>
                </li>

            </ul>
            <!--点标记-->
            <div class="swiper-pagination banner-index clearfix"></div>

            <a href="javascript:;" id="prev" class="iconfont icon-arrowLeft"></a>
            <a href="javascript:;" id="next" class="iconfont icon-arrowRight"></a>
        </div>


        <!-- 第一个nav部分 -->
        <div class="lvmm-travel">
            <a href="javascript:;"><img src="./images/icon/nav1.png"></a>
            <a href="javascript:;"><img src="./images/icon/nav2.png"></a>
            <a href="javascript:;"><img src="./images/icon/nav3.png"></a>
            <a href="javascript:;"><img src="./images/icon/nav4.png"></a>
            <a href="javascript:;"><img src="./images/icon/nav5.png"></a>
            <a href="javascript:;"><img src="./images/icon/nav6.png"></a>
        </div>
        <!-- 第二个nav部分 -->
        <nav>
            <ul>
                <li><a href="javascript:;"><img src="./images/icon/j1.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./images/icon/j2.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./images/icon/j3.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./images/icon/j4.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./images/icon/j5.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./images/icon/j6.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./images/icon/j7.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./images/icon/j8.png" alt=""></a></li>

            </ul>
        </nav>
        <!-- 特价部分 -->
        <div class="lvmm-special clearfix">
            <a href="javascrip:;" class="f_left"><img src="./images/img/t1.jpg" alt=""></a>
            <a href="javascrip:;" class="f_left"><img src="./images/img/t2.jpg" alt=""></a>
            <a href="javascrip:;" class="f_left"><img src="./images/img/t3.jpg" alt=""></a>
        </div>
        <!-- 热门活动lvmm-hot -->
        <div class="lvmm-hot clearfix">
            <h4>热门活动</h4>
            <a href="javascript:;"><img src="./images/img/r1.jpg" alt=""></a>
            <a href="javascript:;"><img src="./images/img/r2.jpg" alt=""></a>
            <a href="javascript:;"><img src="./images/img/r3.jpg" alt=""></a>
            <a href="javascript:;"><img src="./images/img/r4.jpg" alt=""></a>
        </div>
        <!-- 休假tab菜单 -->
        <div class="lvmm-tab-vacation clearfix ">
            <div class="tab-nav clearfix">
                <ul class="clearfix">
                    <li><a href="javascript:;">度周末</a></li>
                    <li><a href="javascript:;">度长假</a></li>
                </ul>
            </div>
        </div>
        <!-- 更多... -->
        <div class="more"></div>
        <!--底部 -->
        <footer></footer>

    </div>
    <script src="./js/zepto.js"></script>
    <script src="./js/swipe.js"></script>
    <script>
        window.mySwipe = Swipe(document.querySelector(".lvmm-banner"), {
            auto: 2000,
           
        });

        document.getElementById("prev").onclick = function () {
            window.mySwipe.prev();
        }
        document.getElementById("next").onclick = function () {
            window.mySwipe.next();
        }
    </script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
      direction: 'horizontal', //上下滑动，要是横着滑就是horizontal,要是竖着滑vertical
      //pagination: ".nav", //自定义分页器放在里面放在外面都可以。要是放在里面就可以用swiper-pagination
      pagination: ".swiper-pagination",
      paginationType: "bullets",
      //   /*这个就是bullets小圆点 fraction分式 1/3 progress 进度条最上方*/
      paginationClickable: true, //表示分页能否点击true表示能点击false表示不能点击
      //paginationHide: true, //显示隐藏分页器,点击容器来回切换显示还是隐藏
      paginationElement: "i" //尽量不要是li因为最外层是DIV
        });

        document.getElementsByClassName('.xiala').onclick = function(){
            console.log(123);
            
        }
    </script>
    
</body>

</html>